<template>
  <div>
    <router-view></router-view>

    <div class="tabbar-virtual-box"></div>
    <weui-tabbar
      :selectedIndex.sync="selectedIndex"
      @click.native="handleTabbarChange"
    >
      <weui-tabbar-item
        :icon="getTabBarIcon(0)"
        label="微信"
      ></weui-tabbar-item>
      <weui-tabbar-item
        :icon="getTabBarIcon(1)"
        label="通讯录"
      ></weui-tabbar-item>
      <weui-tabbar-item
        :icon="getTabBarIcon(2)"
        label="发现"
      ></weui-tabbar-item>
      <weui-tabbar-item
        :icon="getTabBarIcon(3)"
        label="我"
      ></weui-tabbar-item>
    </weui-tabbar>
  </div>
</template>

<script>
const base = ["chat", "address-book", "find", "mine"]
const routes = base.map((v) => `/app/${v}`)
export default {
  data: () => ({
    tabbar: "src/assets/images/find.svg",
    selectedIndex: 0,
  }),
  methods: {
    handleTabbarChange() {
      const path = this.$route.path
      const targetPath = routes[this.selectedIndex]
      if (path === targetPath) return
      this.$router.replace({
        path: targetPath,
      })
    },

    getTabBarIcon(index) {
      const basePath = "/images/tabbar/"
      if (this.selectedIndex === index) {
        return basePath + base[index] + "-active.svg"
      } else {
        return basePath + base[index] + ".svg"
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.tabbar-virtual-box {
  height: 66.95px;
}
.weui-tabbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: $background-color;
}
</style>
